<template>
  <div id="vuex_demo1">
    store中的count = {{ $store.state.myCount }}
    <el-button type="primary" @click="addCount1(5)">同步点击修改</el-button>
    <el-button type="primary" @click="addCount2(10)">异步点击修改</el-button>


    <el-button type="info" @click="getUsers()">异步获取所用用户数据</el-button>


    <el-table
        :data="userTableData"
        border
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="用户ID"
          width="150">
      </el-table-column>
      <el-table-column
          prop="loginId"
          label="用户帐号"
          width="120">
      </el-table-column>
      <el-table-column
          label="用户状态"
          width="120">
        <template slot-scope="scope">
          {{ scope.row.status === '1' ? '正常' : '禁用'}}
        </template>
      </el-table-column>
      <el-table-column
          label="头像"
          width="120">
        <template slot-scope="scope">
          <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.photoPath"
              fit="fill"></el-image>
          <!--<img :src="scope.photoPath" style="width: 100px; height: 100px">-->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
    data() {
        return {
            userTableData:[]
        }
    },
    created() {
        
    },
    methods: {
        addCount1( n ) {
            this.$store.commit('increment', n)
        },
        addCount2( n ) {
            this.$store.dispatch('incr', n)
        },
        getUsers() {
          // actions中的函数调用时， 只能用dispatch
          this.$store.dispatch('initAry')

          this.userTableData = this.$store.state.ary
        }
    }
}
</script>

<style>

</style>